<template>
	<view class="sa_content">
		<view class="go_Reset">
			<view class="go_search">
				<image :src="HTTP_IMG_UTL+'go_seracth.png'" style="width: 30rpx;height: 30rpx;" />
				<input @confirm="handeleSearch" style="margin-left: 6rpx;" type="text" v-model="inputValue"
					:placeholder="$t('请输入您想要查找的内容')">
			</view>
		</view>
		<!-- 无数据提示 -->
		<view v-if="isShow" style="color: 999999;margin-top: 30rpx;">{{$t('暂无信息')}}</view>
		<view class="list_block">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" :refresher-enabled="enabled"
				@scrolltolower="handeleScrolltolower" @refresherrefresh="handeleRefresherrefresh"
				:refresher-triggered="refresh" scroll-anchoring="true">
				<view v-for="(item,index) in list" :key="index" class="ant_list_items" @click="handeleDetail(item)">
					<view class="list_block">
						<view class="list_block_top">
							<view class="list_departure_country">
								<!-- 0=中国,1=俄罗斯 -->
								<view style="width: 48%;display: flex;align-items: center;">
									<image v-if="item.departure_country=='0'" :src="HTTP_IMG_UTL+'zone_001681@4x.png'"
										style="width: 30rpx;height: 20rpx;margin-right: 8rpx;" mode="" />
									<image v-if="item.departure_country=='1'" :src="HTTP_IMG_UTL+'zone_002680@4x.png'"
										style="width: 30rpx;height: 20rpx;margin-right: 8rpx;" mode="" />

										<view style="width: 200rpx;text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap;" v-if="item.departurecitys.city_name==null||item.departurecitys.city_name==''">
											{{$t("不限")}}
										</view>
										<view style="width: 200rpx;text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap;" v-else>
											{{lang==='zh'?item.departurecitys.city_name:item.departurecitys.city_name_ru}}
										</view>

								</view>

								<image :src="HTTP_IMG_UTL+'zone_00330@4x.png'" style="width: 30rpx;height: 10rpx;"
									mode=""></image>
								<view style="width: 48%;margin-left: 50rpx;display: flex;align-items: center;">
									<image v-if="item.reach_country=='0'" :src="HTTP_IMG_UTL+'zone_001681@4x.png'"
										style="width: 30rpx;height: 20rpx;margin-right: 8rpx;" mode="" />
									<image v-if="item.reach_country=='1'" :src="HTTP_IMG_UTL+'zone_002680@4x.png'"
										style="width: 30rpx;height: 20rpx;margin-right: 8rpx;" mode="" />

										<view style="width: 200rpx;text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap;" v-if="item.reachcitys.city_name==null||item.reachcitys.city_name==''">
											{{$t("不限")}}
										</view>
										<view style="width: 200rpx;text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap;">
											{{lang==='zh'?item.reachcitys.city_name:item.reachcitys.city_name_ru}}
										</view>

								</view>
							</view>

						</view>
						<view class="list_bottom">
							<u-image v-if="pages.release_type==1" mode="widthFix" :src="IMGURL+item.category.image"
								width="204rpx" height="132rpx" :lazy-load="true">
								<image slot="error" style="width: 204rpx;height: 132rpx;"
									:src="HTTP_IMG_UTL+'zhanwei_20240923165135.png'" mode=""></image>
							</u-image>
							<u-image v-if="pages.release_type==3" mode="widthFix"
								src="https://app.gluz.com.cn/uniappAssets/transportIcon3.png" width="204rpx"
								height="132rpx" :lazy-load="true">
								<image slot="error" style="width: 204rpx;height: 132rpx;"
									:src="HTTP_IMG_UTL+'zhanwei_20240923165135.png'" mode=""></image>
							</u-image>
							<view class="list_communicate_model">
								<view v-if="pages.release_type==1" class="list_category_name">
									{{lang==='zh'?item.category.name:item.category.name_ru}}
								</view>
								<view v-if="pages.release_type==3" class="list_category_name">
									{{lang==='zh'?item.goods_name:item.goods_name_ru}}
								</view>
								<view v-if="pages.release_type==3">
									<view style="color: #FF0000;margin-bottom: 12rpx;">
										<span style="font-weight: 700;font-size: 45rpx;">{{item.desire_price}}</span>
										<span>{{$t(item.price_unit)}}/kg</span>
									</view>
								</view>
								<view style="display: flex;align-items: center;">
									<view class="list_whole_diffuse" v-if="item.whole_diffuse && item.whole_diffuse_ru">
										{{lang==='zh'?item.whole_diffuse:item.whole_diffuse_ru}}
									</view>

									<view class="list_load_num" v-if="item.load_num">{{item.load_num}}kg</view>

									<view class="list_goods_volume" v-if="item.goods_volume">{{item.goods_volume}}m³
									</view>
								</view>
								<view class="list_communicate" @click.stop="handeleConver(item)">{{$t('即时沟通')}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from '@/config/app';
	import {
		createC2CConversation,
		isBase64,
		time
	} from "@/common/public";
	export default {
		data() {
			return {
				HTTP_IMG_UTL,
				isShow: false,
				IMGURL: '', //图片地址
				inputValue: '', //输入框内容
				pages: {
					page: 1,
					searchKey: ''
				}, //页面传参数据
				list: [], //数据
				scrollTop: 0,
				enabled: true,
				refresh: false,
				lang: 'zh'
			}
		},
		onLoad(option) {
			this.pages = JSON.parse(option.data)
			// 获取列表数据
			this.getData()
			// 图片地址url前缀
			this.IMGURL = IMAGE_URL
			// 获取语言
			this.getLang()
		},
		methods: {
			setCity(str) {
				let array = str.split(',');
				return
			},
			// 跳转至详情页
			handeleDetail(item) {
				if (this.pages.release_type == 1) {
					uni.navigateTo({
						url: '/pages/index/detail/trDetail?id=' + item.id + '&type=' + this.pages.type +
							'&releaseType=' + 'transport'
					})
				} else {
					uni.navigateTo({
						url: '/pages/index/detail/trDetail4?id=' + item.id + '&type=' + this.pages.type +
							'&releaseType=' + 'transport'
					})
				}

			},
			// 即时沟通
			handeleConver(item) {
				createC2CConversation(item.user.mobile, this)
			},
			// 上拉刷新
			handeleScrolltolower() {
				// this.pages.page = this.pages.page+1
				this.pages.page++
				// console.log('this.pages:',this.pages.page++ );
				this.pages.searchKey = this.inputValue
				this.getData()
			},
			// 下拉刷新
			handeleRefresherrefresh() {
				this.inputValue = ''
				// this.pages={
				// 	type:this.pages.type,
				// 	page:1,
				// 	release_type:'',
				// 	departure_country:'',
				// 	reach_country:'',
				// 	whole_diffuse:'',
				// 	mode:'',
				// 	departure_city:'',
				// 	reach_city:'',
				// 	car_category_id:'',
				// 	searchKey:''
				// }

				this.getData()
				this.refresh = true
			},
			handeleSearch() {
				this.pages.page = 1
				this.pages.searchKey = this.inputValue
				this.getData()
			},
			// 获取列表数据
			getData() {
				uni.showLoading({
					title: '加载中...',
					mask: true, // 是否显示透明蒙层，防止触摸穿透
				});
				this.$u.api.collection.getTransportList(this.pages).then(res => {

					if (this.pages.page == 1 && res.length == 0) {
						this.isShow = true
					} else {
						this.isShow = false
					}
					if (this.pages.page === 1) {
						this.list = res
					} else {
						this.list = [...this.list, ...res]
					}
					this.refresh = false
					uni.hideLoading();

				}).catch(err => {
					uni.hideLoading();
				})
			},
			// 获取语言
			getLang() {
				// 获取缓存lang当前语言值
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') { //zh为中国，赋值0
							this.lang = 'zh'
						} else { //其他为俄罗斯，赋值1
							this.lang = 'ru'
						}
					}
				});
			},
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("运输列表")
			})
		},
		onPullDownRefresh() {

			uni.stopPullDownRefresh()

		}
	}
</script>

<style lang="scss" scoped>
	.list_departure_country {
		width: 90%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
	}

	.list_whole_diffuse {
		font-size: 20rpx;
		padding: 6rpx 22rpx;
		background-color: #54CEE3;
		color: #ffffff;
		border-radius: 8rpx;
		margin-right: 9rpx;
	}

	.list_load_num {
		font-size: 20rpx;
		padding: 6rpx 20rpx;
		background-color: #378BFD;
		color: #ffffff;
		border-radius: 8rpx;
		margin-right: 9rpx;
	}

	.list_goods_volume {
		font-size: 20rpx;
		padding: 6rpx 13rpx;
		background-color: #54D441;
		color: #ffffff;
		border-radius: 8rpx;
	}

	.list_category_name {
		width: 300rpx;
		height: 50rpx;
		text-align: end;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		white-space: nowrap;
		font-size: 26rpx;
	}

	.list_communicate_model {
		width: 320rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.list_communicate {
		padding: 14rpx 16rpx;
		background-color: #000000;
		color: #ffffff;
		font-size: 20rpx;
		border-radius: 9rpx;
		margin-top: 20rpx;
	}

	.list_bottom {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 22rpx;
	}

	.list_right {
		font-size: 26rpx;
		color: #A4A4A4;
		width: 112rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 30rpx;
	}

	.list_block_top {
		width: 100%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// background-color: red;
	}

	.list_block {
		width: 650rpx;
		min-height: 190rpx;
		display: flex;
		flex-direction: column;
	}

	.items_top {
		width: 650rpx;
		height: 30rpx;
		background-color: blue;
	}

	.ant_list_items {
		width: 690rpx;
		min-height: 244rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.scroll-Y {
		width: 100%;
		height: calc(100vh - 90rpx);
	}

	.list_block {
		width: calc(100% - 60rpx);

	}

	.go_Reset {
		width: calc(100% - 60rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.go_search {
		border-radius: 34rpx;
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}

	.sa_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
<style>
	page {
		background: #F6F6F6;
	}
</style>